<!DOCTYPE html>
<html lang="en">

<head>
    <title>vr no box example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body {
            margin: 0px;
            overflow: hidden;
        }

        #example {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
    </style>
</head>

<body>
    <div id="example"></div>

    <script src="../build/three.js"></script>
    <script src="./js/controls/OrbitControls.js"></script>
    <script src="../build/mxreality.js"></script>

    <script>
        var vr = new VR({ 'id': 'example', 'camera_position': { 'y': 80 } });
        var scene = vr.scene;
        var renderer = vr.renderer;

        vr.init(function () {

        });

        light = new THREE.DirectionalLight(0xffffff, 1);//设置平行光源
        light.position.set(400, 400, 200);//设置光源向量
        light.shadow.camera.zoom = 4;
        light.castShadow = true;
        light.shadow.camera.near = 0.001;
        light.shadow.camera.far = 1500;
        light.shadow.camera.left = 1000;
        light.shadow.camera.right = 1000;
        light.shadow.camera.top = 1000;
        light.shadow.camera.bottom = 1000;
        scene.add(light);

        var texture = THREE.ImageUtils.loadTexture(
            'textures/checker.png'
        );
        texture.wrapS = THREE.RepeatWrapping;
        texture.wrapT = THREE.RepeatWrapping;
        texture.repeat = new THREE.Vector2(50, 50);
        texture.anisotropy = renderer.getMaxAnisotropy();
        var material = new THREE.MeshLambertMaterial({ map: texture });
        var geometry = new THREE.PlaneGeometry(1000, 1000);
        var mesh = new THREE.Mesh(geometry, material);
        mesh.rotation.x = -Math.PI / 2;
        mesh.receiveShadow = true;
        mesh.castShadow = true;
        scene.add(mesh);

        var geometryEarth = new THREE.SphereGeometry(50, 60, 40);
        var materialEarth = new THREE.MeshLambertMaterial({
            map: new THREE.TextureLoader().load('textures/land_ocean_ice_cloud_2048.jpg')
        });
        meshEarth = new THREE.Mesh(geometryEarth, materialEarth);
        meshEarth.position.set(0, 50, 300);
        meshEarth.castShadow = true;
        scene.add(meshEarth);

        var textureCube = new THREE.TextureLoader().load('textures/crate.gif');
        var geometryCube = new THREE.BoxBufferGeometry(50, 50, 50);
        var materialCube = new THREE.MeshBasicMaterial({ map: textureCube });
        meshCube = new THREE.Mesh(geometryCube, materialCube);
        meshCube.position.z = -400;
        meshCube.position.y = 50;
        meshCube.castShadow = true;
        scene.add(meshCube);

        function animate() {
            requestAnimationFrame(animate);
            meshEarth.rotation.y += 0.01;

            meshCube.rotation.x += 0.005;
            meshCube.rotation.y += 0.01;

        }
        animate();

    </script>
</body>

</html>